<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
    $(document).ready(function() {
        var fm = ["childForm", "child_container", "childFormId"];
        Page.createForm(fm);
        TempUtil.render('child_template', 'childForm', DOC);
        Page.setStripeTable();
        Page.render('#fwHead', '#fwHead_template');
        Page.render('#fwBody', '#fwBody_template');
        var showText = wirelessconfightml.prompt;//{}

        var $btnAdd = $('#btnAdd'),$btnAdd2 = $('#btnAdd2'),$btnClose = $('#btnClose'),
            $btnSaveIp = $('#btnSaveIp'),$btnEditIp = $('#btnEditIp'),$box = $('#edit_box'), $mask = $('#mask'),
            $btnSaveIp2 = $('#btnSaveIp2'),$btnEditIp2 = $('#btnEditIp2');

        var editIndex = 0;

        var rules = {
            remoteLoginPort: {required: true, range: [0, 65535]}
        };

        var messages = {
            remoteLoginPort: {required: CHECK.required.remotePort, range: CHECK.range.port}
        };

        if(!Page.getShowHideByBit(17)){
            $('#remoteIpList').hide();
        }else {
            $('#remoteIpList').show();
        };

        if(sessionStorage['level'] == "1"){    
            $("#dafulteIpList").show();
        }else{
            $("#dafulteIpList").hide();
        }
        $btnAdd.click(function () {
            $box.addClass('edit_box').show(); 
            $mask.show();
            $btnSaveIp.show();
            $btnEditIp.hide();
            $btnSaveIp2.hide();
            $btnEditIp2.hide();
            $('#edit_title').text(DOC.table.add + DOC.lbl.remoteIp);
            SysUtil.setBoxStyle1($box);
        });

         $("#btnAdd2").click(function () {
            $box.addClass('edit_box').show(); 
            $mask.show();
            $btnSaveIp.hide();
            $btnEditIp.hide();
            $btnSaveIp2.show();
            $btnEditIp2.hide();
            $('#edit_title').text(DOC.table.add + DOC.lbl.remoteIp);
            SysUtil.setBoxStyle1($box);
        });

        $btnClose.click(function() {
            $box.removeClass('edit_box').hide();
            $mask.hide();
            $('#ipList').val('');
        });

        $btnSaveIp.click(function () {
            var ip = $('#ipList').val().trim().replace(/ /g, '');
            if (ip == "") {
                AlertUtil.alertMsg(CHECK.required.ip);
                return false;
            }

            if (!CheckUtil.checkIp(ip,'')) {
                AlertUtil.alertMsg(CHECK.format.ip);
                return false;
            }

            var sb = String.format('<tr><td>{0}</td><td><a href="javascript:;" class="ipEdit">{1}</a></td><td><a href="javascript:;" class="ipDel">{2}</a></td></tr>',ip, showText.edit,showText.del);
            $("'"+sb+"'").appendTo($('#ipLists table'));
            $box.removeClass('edit_box').hide();
            $mask.hide();
            $('#ipList').val('');
        });

        $btnSaveIp2.click(function () {
            var ip = $('#ipList').val().trim().replace(/ /g, '');
            if (ip == "") {
                AlertUtil.alertMsg(CHECK.required.ip);
                return false;
            }

            if (!CheckUtil.checkIp(ip,'')) {
                AlertUtil.alertMsg(CHECK.format.ip);
                return false;
            }

            var sb = String.format('<tr><td>{0}</td><td><a href="javascript:;" class="ipEdit2">{1}</a></td><td><a href="javascript:;" class="ipDel">{2}</a></td></tr>',ip, showText.edit,showText.del);
            $("'"+sb+"'").appendTo($('#ipListsDafult table'));
            $box.removeClass('edit_box').hide();
            $mask.hide();
            $('#ipList').val('');
        });

        var $enableRemoteLogin=0;
        $("#btnSave").on("click",function(){
            $('#btnSave').attr("disabled",true);
            var ipArray = new Array();
        var $tr=$("#ipLists table tr");
        for(var i=1;i<$tr.length;i++){
            ipArray.push($($tr[i]).children("td").eq(0).text());
            
        }
        var ipArray2 = new Array();
        var $tr2=$("#ipListsDafult table tr");
        for(var i=1;i<$tr2.length;i++){
            ipArray2.push($($tr2[i]).children("td").eq(0).text());
            
        }

        if($("#enableRemoteLogin").prop("checked")){//返回值
            enableRemoteLogin = 1;
        }else{
            enableRemoteLogin = 0;
        }

        var $remoteLoginPort = $('#remoteLoginPort').val();
        var $form = $('#childForm');
        var json = JSON.parmsToJSON($form);
        if(!CheckUtil.checkForm($form, rules, messages)) {
            $('#btnSave').attr("disabled",false);
            return;
        }

        var json = {};
            json.remoteLoginPort = $remoteLoginPort;
            if(Page.getShowHideByBit(17)) {
                json.dataList1 = ipArray;
            };
            if(sessionStorage['level'] == "1") {
                json.dataList2 = ipArray2;
            };           
            json.pingFlag = enableRemoteLogin;
            json.method = JSONMethod.POST;
            json.cmd = RequestCmd.SET_WEB_LIST;
             Page.postJSON({
                json: json,
                success: function(data) {
                    AlertUtil.alertMsg(PROMPT.saving.success);
                },
                complete: function(){
                    $('#btnSave').attr("disabled",false);
                }
            });


        });

        $btnEditIp.click(function () {
            var ip = $('#ipList').val().trim().replace(/ /g, '');
            if (ip == "") {
                AlertUtil.alertMsg(CHECK.required.ip);
                return false;
            }

            if (!CheckUtil.checkIp(ip,'')) {
                AlertUtil.alertMsg(CHECK.format.ip);
                return false;
            }

            $('#ipLists table tr').eq(editIndex).children('td').eq(0).text(ip);
            $box.removeClass('edit_box').hide();
            $mask.hide();
            $('#ipList').val('');

        });

        $btnEditIp2.click(function () {
            var ip = $('#ipList').val().trim().replace(/ /g, '');
            if (ip == "") {
                AlertUtil.alertMsg(CHECK.required.ip);
                return false;
            }

            if (!CheckUtil.checkIp(ip,'')) {
                AlertUtil.alertMsg(CHECK.format.ip);
                return false;
            }

            $('#ipListsDafult table tr').eq(editIndex).children('td').eq(0).text(ip);
            $box.removeClass('edit_box').hide();
            $mask.hide();
            $('#ipList').val('');

        });

        $(document).on('click','a[class="ipDel"]',function(){
            $(this).parent().parent().remove();
        });

        $(document).on('click','a[class="ipEdit"]',function(){
            $box.addClass('edit_box').show();
            $mask.show();
            $btnSaveIp.hide();
            $btnEditIp.show();
            $btnSaveIp2.hide();
            $btnEditIp2.hide();
            $('#edit_title').text(DOC.table.edit + DOC.lbl.remoteIp);
            SysUtil.setBoxStyle1($box);
            $('#ipList').val($(this).parent().parent().children('td').eq(0).text());
            editIndex = $('#ipLists table tr').index($(this).parent().parent());
        });


         $(document).on('click','a[class="ipEdit2"]',function(){
            $box.addClass('edit_box').show();
            $mask.show();
            $btnSaveIp.hide();
            $btnEditIp.hide();
            $btnSaveIp2.hide();
            $btnEditIp2.show();
            $('#edit_title').text(DOC.table.edit + DOC.lbl.remoteIp);
            SysUtil.setBoxStyle1($box);
            $('#ipList').val($(this).parent().parent().children('td').eq(0).text());
            editIndex = $('#ipListsDafult table tr').index($(this).parent().parent());
        });

        function createIpListTable(ips) {
            var sb = new StringBuilder();
            sb.append(String.format('<table class="list" cellspacing="0"><tr><th>IP</th><th>{0}</th><th>{1}</th></tr>',
                showText.edit,showText.del));



            for(var i = 0; i < ips.length; i++) {
                if(ips[i] !== ""){
                    sb.append(String.format('<tr><td>{0}</td><td><a href="javascript:;" class="ipEdit">{1}</a></td><td><a href="javascript:;" class="ipDel">{2}</a></td></tr>',ips[i], showText.edit,showText.del));
                }
            }

            sb.append('</table>');

            $('#ipLists').html(sb.toString());
        }
         function createIpListTable2(ips) {
            var sb = new StringBuilder();
            
            sb.append(String.format('<table class="list" cellspacing="0"><tr><th>IP</th><th>{0}</th><th>{1}</th></tr>',
                showText.edit,showText.del));

            for(var i = 0; i < ips.length; i++) {
                if(ips[i] !== ""){
                    sb.append(String.format('<tr><td>{0}</td><td><a href="javascript:;" class="ipEdit2">{1}</a></td><td><a href="javascript:;" class="ipDel">{2}</a></td></tr>',ips[i], showText.edit,showText.del));
                }
            }

            $('#ipListsDafult').html(sb.toString());
        }


        var allIpList=new Array();
        function getInfo() {
            Page.postJSON({
                json: {
                    cmd: RequestCmd.GET_WEB_LIST
                },
                success: function(datas) {
                        var datas = datas.data,
                            webList,
                            defultList;
                        $('#remoteLoginPort').val(datas.remoteLoginPort);
                        if(!datas.webList) {
                            webList = [""];
                        }else {
                            webList = datas.webList;
                        };
                        if(!datas.defultList) {
                            defultList = [""]
                        }else {
                            defultList = datas.defultList;
                        }
                        createIpListTable(webList);
                        createIpListTable2(defultList);
                         if(datas.webFlag == true){
                                $("#enableRemoteLogin").prop("checked",true);
                            }else{
                                $("#enableRemoteLogin").prop("checked",false);
                        }
                }
            });
        }

        getInfo();

    });
</script>


<div class="tab_boxes" id="child_container">
    <div id="childFormId">
        <script type="text/template" id="child_template">
            <div>
                <!-- <form id="childForm" > -->
                <table class="detail" cellspacing="0">
                    <tr>
                        <th><%- lbl.remoteLogin %><%- colon %></th>
                        <td>
                            <input type="checkbox" id="enableRemoteLogin" name="enableRemoteLogin" /><%- status.enable %>
                        </td>
                    </tr>
                    <tr>
                        <th><%- lbl.remotePort %><%- colon %></th>
                        <td>
                            <input type="text" id="remoteLoginPort" name="remoteLoginPort" />
                        </td>
                    </tr>
                    <tr id="remoteIpList">
                        <th><%- lbl.remoteIpList %><%- colon %></th>
                        <td>
                            <input id="btnAdd" type="button" value="<%- lbl.addRemoteIp %>" />
                            <div id="ipLists"></div>
                        </td>
                    </tr>
                        <tr id="dafulteIpList" style="display:none;">
                        <th><%- lbl.dafulteIpList %><%- colon %></th>
                        <td>
                            <input id="btnAdd2" type="button" value="<%- lbl.addRemoteDafultIp %>" />
                            <div id="ipListsDafult"></div>
                        </td>
                    </tr>
                    <tr>
                        <th>&nbsp;</th>
                        <td><input type="button" id="btnSave" value="<%- btn.save %>" /></td>
                    </tr>
                </table>           
                <!-- </form> -->
            </div>
            <span style="clear:both"></span>
        </script>
    </div>
</div>

<div id="edit_box" style="display: none;" >
    <div class="detail" id="fwHead">
        <script type="text/template" id="fwHead_template">
            <div id="edit_title"></div>
            <div id="edit_close"><input id="btnClose" type="button" value="<%- btn.close %>" /></div>
            <div style="clear:both;"></div>
        </script>
    </div>
    <div id="fwBody">
        <script type="text/template" id="fwBody_template">
            <table class="detail" cellspacing="0">
                <th><%- lbl.remoteIp %><%- colon %></th>
                <td>
                    <input type="text" id="ipList" name="ipList" class="large" maxlength="99" /><span class="cmt"><%- lbl.example %><%- colon %>192.168.2.1</span></span>
                </td>
                <tr>
                    <th>&nbsp;</th>
                    <td>
                        <input type="button" id="btnSaveIp" value="<%- btn.save %>" />
                        <input type="button" id="btnSaveIp2" value="<%- btn.save %>" style="display:none;"/>
                        <input type="button" id="btnEditIp" value="<%- btn.save %>"/>
                        <input type="button" id="btnEditIp2" value="<%- btn.save %>" style="display:none;"/>
                    </td>
                </tr>
            </table>
        </script>
    </div>
</div>